import React from 'react';
import { Row, Col, Form, Input, Button, Spin, DatePicker, Table, Select, Popconfirm, Card, message, Upload, Icon } from 'antd';
import moment from 'moment';
import { getJsonReactNode } from '../../utils';
import { DEFAULT_PAGE_SIZE } from '../../utils/constants';
import styles from '../common_left.css';


const FormItem = Form.Item;
const formItemLayout = {
  labelCol: {
    span: 8,
  },
  wrapperCol: {
    span: 16,
  },
};

@Form.create()
class CaseTable extends React.Component {

  handleSearch = () => { // 查询方法
    const {  // 该组件的属性，由外部传入参数
      dispatch,
      form: { validateFields, getFieldsValue },
    } = this.props;
    validateFields((errors) => {
      if (errors) {
        return;
      }
      const data = {
        ...getFieldsValue(),
      };
      dispatch({ // 调用接口，请求数据
        type: 'casemanage/fetchSmokeResult', //  models的namespace + effects的方法名，也可以是reducers的方法
        payload: {
          params: data,
        },
      });
    });
  };

  // 将获取到的接口数据进行渲染
  render() {
    const { dispatch, loading, smokereportinfo, projectlist, form: { getFieldDecorator } } = this.props;
    const status = ['通过', '不通过'];
    // 定义表头字段及取值内容
    const columns = [
      {
        title: 'project_name',
        dataIndex: 'project_name',
        key: 'project_name',
      },
      {
        title: '版本号',
        dataIndex: 'fix_version',
        key: 'fix_version',
      },
      {
        title: '冒烟结果',
        dataIndex: 'somkeresult',
        key: 'somkeresult',
      },
      {
        title: '报告人',
        dataIndex: 'reporter',
        key: 'reporter',
      },
    ];
    return (
      <div>
        {
          <div>
            <Card style={{ marginBottom: 16 }}>
              <Row gutter={12} style={{ marginBottom: 8 }}>
                <Form>
                  <Col span={6}>
                    <FormItem
                      label="project_name"
                      {...formItemLayout}
                    >
                      {getFieldDecorator('project_name', {
                        initialValue: '',
                      })(
                        <Select
                          showSearch
                          optionFilterProp="children"
                          filterOption={(input, option) =>
                            option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                        >
                          <Option key={-1} value="">请选择项目名称</Option>
                          {// 这括号表示括起来的是一个表达式 不同于函数的括号，这里面只能放一个表达式
                            projectlist.map((item, index) => {
                              return (<Option key={index} value={item}>{item}</Option>);
                            })
                          }
                        </Select>
                      )}
                    </FormItem>
                  </Col>
                  <Col span={6}>
                    <FormItem
                      label="fix_version"
                      {...formItemLayout}
                    >
                      {getFieldDecorator('fix_version', {
                        initialValue: '',
                      })(
                        < Input />
                      )}
                    </FormItem>
                  </Col>
                  <Col span={6}>
                    <FormItem
                      label="somkeresult"
                      {...formItemLayout}
                    >
                      {getFieldDecorator('somkeresult', {
                        initialValue: '',
                      })(
                        <Select
                          showSearch
                          optionFilterProp="children"
                          filterOption={(input, option) =>
                            option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                        >
                          <Option key={-1} value="">请选择项目名称</Option>
                          {// 这括号表示括起来的是一个表达式 不同于函数的括号，这里面只能放一个表达式
                            status.map((item, index) => {
                              return (<Option key={index} value={item}>{item}</Option>);
                            })
                          }
                        </Select>
                      )}
                    </FormItem>
                  </Col>
                  <Col span={6}>
                    <Button type="primary" loading={loading} onClick={this.handleSearch}>查询</Button>
                  </Col>
                </Form>
              </Row>
            </Card>
            <Table
              columns={columns}
              dataSource={smokereportinfo}
              loading={loading}
              rowKey={record => record.id}
              pagination={{
                pageSize: DEFAULT_PAGE_SIZE,
              }}
              bordered
            />
          </div>
        }
      </div>
    );
  }
}

export default CaseTable;
